﻿@{
    ViewBag.Title = "Index";
}
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

<script type="text/javascript">
    var ws;
    $(
        function () {
            $("#btnConnect").click(function () {
                $("#messageSpan").text("Connection...");
                ws = new WebSocket("ws://localhost:17832//api/WSChat");
                ws.onopen = function () {
                    $("#messageSpan").text("Connected!");
                };
                ws.onmessage = function (result) {
                    $("#messageSpan").text(result.data);
                };
                ws.onerror = function (error) {
                    $("#messageSpan").text(error.data);
                };
                ws.onclose = function () {
                    $("#messageSpan").text("Disconnected!");
                };
            });
            $("#btnSend").click(function () {
                if (ws.readyState == WebSocket.OPEN) {
                    ws.send($("#txtInput").val());
                }
                else {
                    $("messageSpan").text("Connection is Closed!");
                }
            });
            $("#btnDisconnect").click(function () {
                ws.close();
            });
        }
    );
</script>

<fieldset>
    <input type="button" value="Connect" id="btnConnect" />
    <input type="button" value="DisConnect" id="btnDisConnect" />
    <hr />
    <input type="text" id="txtInput" />
    <input type="button" value="Send" id="btnSend" />
    <br />
    <span id="messageSpan" style="color:red;"></span>
</fieldset>